<template>
      <div>
            <div>头像
                  <el-upload
                        class="avatar-uploader"
                        action="http://localhost:80/user/upload"
                        name="fname"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :on-error="handleAvatarError"
                  >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
                        <i v-else class=el-icon-plus avatar-uploader-icon></i>
                  </el-upload>
            </div>
            <div style="margin-top: 15px;">
                  昵称 <el-input v-model="name"></el-input>
            </div>
            <div style="margin-top: 15px;">
                  <el-button type="parimary" @click="updateUserInfo">更新信息</el-button>
            </div>
      </div>      
</template>
<script>
export default {
      name:"basecSetting",
      props: ["user"],
      data(){
            return {
                  imageUrl:"",
                  name:"",
            };
      },
      created(){
            console.log(this.user);
            this.imageUrl = this.user.portrait;
            this.name = this.user.name;
      },
      methods: {
            updateUserInfo(){
                  if(this.user==null){
                        his.$message.error("用户信息不能为空");
                        return;
                  }
                  if(this.user.portrait==null
                  || this.user.name==null
                  || this.user.portrait==""
                  ||this.user.name==""){
                        his.$message.error("用户信息不能为空");
                        return;
                  }

                  return this.axios.post("http://localhost:9000/user/user/updateUserInfo", {
                        userid:this.user.id,
                        portrait:this.imageUrl,
                        name:this.name,
                  })
                  .then(res => {
                        console.log(res);
                        this.$message.success("用户信息更新成功");
                        this.user.portrait=this.imageUrl;
                        this.user.name=this.name;
                        var temp=JSON.parse(localStorage.getItem("user"));
                        temp.content=this.user;
                        localStorage.setItem("user",JSON.stringify(temp));
                  }).catch(err => {
                        console.log(err);
                        this.$message.error("用户信息更新失败");
                  });
            },
            handleAvatarSuccess(res,file) {
                  console.log(res);
                  this.imageUrl=res.content;
            },
            handleAvatarError(err,file) {
                  console.log(err);
            },
      }
}
</script>
<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>